<template>
  <div>
    <!-- 商品列表tab分类开始 -->
    <tab active-color="#fc378c">
      <tab-item :selected="demo1 === '厂家直销'" @click="demo1 = '厂家直销'">厂家直销</tab-item>
      <tab-item :selected="demo1 === '精品推荐'" @click="demo1 = '精品推荐'">精品推荐</tab-item>
    </tab>
    <!-- 商品列表tab分类结束 -->

    <!-- 商品列表开始 -->
    <panel header="零食类组合列表" :footer="footer" :list="list" :type="type"></panel>
    <panel header="玩具类组合列表" :footer="footer" :list="list" :type="type"></panel>
    <!-- 商品列表结束 -->

    <!-- 底部导航开始 -->
    <bottom-tabbar></bottom-tabbar>
    <!-- 底部导航结束 -->
  </div>
</template>
<script>
  import {Tab, TabItem, Panel} from 'vux';
  import BottomTabbar from '../../components/tabbar';

  export default{
    data () {
      return {
        demo1: '精品推荐',
        type: '1',
        list: [{
          src: 'http://img0.imgtn.bdimg.com/it/u=1127868086,1876194502&fm=21&gp=0.jpg',
          title: '标题一',
          desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
          url: '/component/cell'
        }, {
          src: 'http://img0.imgtn.bdimg.com/it/u=1127868086,1876194502&fm=21&gp=0.jpg',
          title: '标题二',
          desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
          url: {
            path: '/component/radio',
            replace: false
          }
        }],
        footer: {
          title: '查看更多',
          url: 'http://vux.li'
        }
      }
    },
    computed: {
    },
    created () {
    },
    components: {
      Tab,
      TabItem,
      Panel,
      BottomTabbar,
    },
  };
</script>

